<template>
  <div>
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      :disabled="disabled"
    >
      <div
        style="
          overflow-x: hidden;
          position: relative;
          background-color: rgb(246, 58, 87) !important;
        "
        id="invite_frm"
      >
        <div
          id="header"
          class="fixed aui-bg-red aui-padded-t-15 aui-padded-b-5"
          style="top: 0"
        >
          <a class="aui-pull-left  aui-padded-l-5" @click="back">
            <span class="iconfont icon-fanhui aui-text-f"></span>
          </a>
        </div>
        <div id="main" style="position: relative">
          <div class="invite_banner">
            <img src="../../assets/invite/yqhy_bj1.png" alt="" />
            <img src="../../assets/invite/yqhy_bj2.png" alt="" />
            <img src="../../assets/invite/yqhy_bj3.png" alt="" />
          </div>
          <div class="btn_group">
            <div class="record" @click="fnOpenRecord"></div>
            <div class="reward" @click="fnOpenReward"></div>
          </div>
          <!-- unsign -->
          <div v-if="!user.isLogin">
            <div class="unsign">
              <div class="unsign_cont">
                <div
                  class="
                    title
                    aui-ftn15 aui-text-center aui-text-9 aui-padded-t-10
                  "
                >
                  请登录后查看我的邀请链接
                </div>
                <div class="bt">
                  <div
                    class="
                      register_btn
                      aui-ftn14 aui-text-red aui-text-center aui-margin-t-10
                    "
                    @click="fnOpenRegister"
                  >
                    注 册
                  </div>
                  <div
                    class="login_btn"
                    style="margin-top: 0.25rem"
                    @click="fnOpenLogin"
                  ></div>
                </div>
              </div>
            </div>
          </div>
          <!-- sign -->
          <div class="sign sk aui-margin-t-15" v-if="user.isLogin" v-cloak>
            <div class="sign_cont">
              <div class="content">
                <div
                  class="
                    aui-ftn14 aui-text-center aui-font-weight aui-padded-b-5
                  "
                  style="color: #f8684c"
                >
                  试客邀请码
                </div>
                <div class="aui-margin-b-5">
                  <input
                    type="text"
                    name="link"
                    v-model="invite.wap_url"
                    class="aui-ftn12 aui-padded-l-15"
                  />
                </div>
                <div>
                  <div
                    class="copy_btn"
                    id="wap_url"
                    data-clipboard-action="copy"
                    :data-clipboard-text="invite.wap_url"
                    @click="fnCopyText('#wap_url')"
                  ></div>
                </div>
                <div class="rwm aui-bg-f aui-padded-5">
                  <img
                    :src="invite.wap_qrcode"
                    id="wap_qrcode"
                    alt=""
                    @click="fnPreview(invite.wap_qrcode)"
                  />
                </div>
                <div
                  class="aui-ftn12 aui-text-6 aui-text-center aui-padded-b-15"
                >
                  试客二维码
                </div>
              </div>
            </div>
            <div class="image_seven"></div>
          </div>

          <div class="sign sj" v-if="user.isLogin" v-cloak>
            <div class="image_eight"></div>
            <div class="sign_cont">
              <div class="content">
                <div
                  class="
                    aui-ftn14 aui-text-center aui-font-weight aui-padded-b-5
                  "
                  style="color: #3699ff"
                >
                  商家邀请码
                </div>
                <div class="aui-margin-b-5">
                  <input
                    type="text"
                    name="link"
                    v-model="invite.merchant_url"
                    class="aui-ftn12 aui-padded-l-15"
                  />
                </div>
                <div
                  class="copy_btn"
                  id="merchant_url"
                  data-clipboard-action="copy"
                  :data-clipboard-text="invite.merchant_url"
                  @click="fnCopyText('#merchant_url')"
                ></div>
                <div class="rwm aui-bg-f aui-padded-5">
                  <img
                    :src="invite.merchant_qrcode"
                    id="merchant_qrcode"
                    alt=""
                    @click="fnPreview(invite.merchant_qrcode)"
                  />
                </div>
                <div
                  class="aui-ftn12 aui-text-6 aui-text-center aui-padded-b-15"
                >
                  商家二维码
                </div>
              </div>
            </div>
          </div>

          <div class="invite" v-if="user.isLogin" v-cloak>
            <div class="content aui-bg-f">
              <div class="aui-text-center aui-text-6" style="font-size: 14px">
                试客或商家注册填写您的邀请码<br />也可成为您的邀请会员
              </div>
              <div
                class="code aui-text-center aui-text-red aui-ftn12"
                v-text="invite.invite"
              ></div>
              <div>
                <div
                  class="copy_btn"
                  id="invite"
                  data-clipboard-action="copy"
                  :data-clipboard-text="invite.invite"
                  @click="fnCopyText('#invite')"
                ></div>
              </div>
            </div>
          </div>

          <div class="get" v-if="user.isLogin" v-cloak>
            <div class="image_nine"></div>
            <div class="get_cont">
              <div class="content aui-bg-f">
                <van-row class="aui-text-center">
                  <van-col span="10" class="lt">
                    <img src="../../assets/invite/yqhy_hdsy.png" alt="" />
                    <div class="aui-text-6 aui-text-center aui-ftn14">
                      最近31天已获得
                    </div>
                    <div class="aui-padded-t-10">
                      <span
                        class="aui-text-red aui-ftn18 aui-font-weight"
                        v-text="invite.money"
                      ></span>
                      <span class="aui-text-7 aui-ftn14">&nbsp;元</span>
                    </div>
                  </van-col>
                  <van-col span="2" class="md">&nbsp;</van-col>
                  <van-col span="10" class="rt">
                    <img src="../../assets/invite/yqhy_yqsl.png" alt="" />
                    <div class="aui-text-6 aui-text-center aui-ftn14">
                      邀请试客和商家
                    </div>
                    <div class="aui-padded-t-10">
                      <span
                        class="aui-text-red aui-ftn18 aui-font-weight"
                        v-text="invite.count"
                      ></span>
                      <span class="aui-text-7 aui-ftn14">&nbsp;人</span>
                    </div>
                  </van-col>
                </van-row>
              </div>
            </div>
          </div>

          <div class="step_three">
            <div class="step_three_cont">
              <div class="content">
                <div class="item aui-ftn12 aui-text-6 aui-text-center">
                  1
                  <br />
                  分享活动
                  <br />
                  给好友
                </div>
                <div class="item aui-ftn12 aui-text-6 aui-text-center">
                  2
                  <br />
                  好友注册
                  <br />
                  并实名认证
                </div>
                <div class="item aui-ftn12 aui-text-6 aui-text-center">
                  3
                  <br />
                  好友参加
                  <br />
                  任意试用
                </div>
              </div>
            </div>
            <div class="image_one"></div>
          </div>

          <div class="invite_rule">
            <div class="image_two"></div>
            <div class="image_three"></div>
            <div class="rule_cont aui-bg-f">
              <div
                class="
                  title
                  aui-ftn18
                  aui-text-center
                  aui-text-3
                  aui-font-weight
                  aui-padded-t-10
                "
              >
                活动规则
              </div>
              <div class="rule_content aui-padded-15">
                <div class="item aui-text-3">
                  <div
                    class="
                      name
                      aui-text-3 aui-font-weight aui-margin-b-15 aui-ftn15
                    "
                  >
                    邀请试客会员
                  </div>
                  <div class="list">
                    1、直接邀请的会员，完成三单奖励上级<span
                      class="aui-text-red aui-font-weight"
                      v-text="invite.invite_user"
                    ></span
                    >元。
                  </div>
                  <div class="list">
                    2、直接邀请的会员，每次试用完成获得<span
                      class="aui-text-red aui-font-weight"
                      v-text="invite.invite_user1"
                    ></span
                    >元提成。
                  </div>
                  <!-- <div class="list">
										3、间接邀请的会员，每次试用完成获得<span class="aui-text-red aui-font-weight" v-text="invite.invite_user2"></span>元奖励。
									</div> -->
                </div>
                <div class="item aui-text-3 aui-padded-t-15">
                  <div
                    class="
                      name
                      aui-ftn15 aui-text-3 aui-font-weight aui-margin-b-15
                    "
                  >
                    邀请商家会员
                  </div>
                  <div class="list">
                    1、直接邀请的商家，发布一份试用并完成，奖励<span
                      class="aui-text-red aui-font-weight"
                      v-text="invite.invite_merchant"
                    ></span
                    >元
                  </div>
                  <div class="list">
                    2、直接邀请的商家，每次出一份试用获得<span
                      class="aui-text-red aui-font-weight"
                      v-text="invite.invite_merchant1"
                    ></span
                    >元提成。
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- <div class="rand aui-margin-t-15 aui-padded-l-15 aui-padded-r-15" v-cloak>
						<div class="image_four"></div>
						<div class="image_five"></div>
						<div class="image_six"></div>
						<div class="rand_cont">
							<div class="content aui-ftn14 aui-text-7">
								<van-row class="aui-ftn14 aui-text-7 list">
									<van-col span="4">排名</van-col>
									<van-col span="14">帐号</van-col>
									<van-col span="6">累计奖励</van-col>
								</van-row>
								<van-row class="aui-ftn14 aui-text-7 list" v-for="(item, index) in invite.rank" :key="index">
									<van-col span="4">
										<img :src="rank1" alt="" v-if="index == 0">
										<img :src="rank2" alt="" v-if="index == 1">
										<img :src="rank3" alt="" v-if="index == 2">
										<span v-if="index > 2" v-text="index + 1"></span>
									</van-col>
									<van-col span="14" v-text="item.mobile" class="list_cont_txt"></van-col>
									<van-col span="6" class="aui-text-red list_cont_txt">{{item.reward}}</van-col>
								</van-row>
							</div>
						</div>

					</div> -->
          <div style="padding-bottom: 60px"></div>
        </div>
      </div>
    </van-pull-refresh>
    <van-button class="kf_btn" round type="danger" @click="utils.openKefu()">
      <img width="32px" height="32px" src="../../assets/index/kf_btn.png" />
    </van-button>
  </div>
</template>
<script>
import Invite from "../../service/invite.js";
import "@/styles/invite.css";
import { mapGetters } from "vuex";
export default {
  name: "Invite",
  data() {
    return {
      headerH: 0,
      from: "",
      rank1: require("../../assets/invite/yqhy_dym.png"),
      rank2: require("../../assets/invite/yqhy_dem.png"),
      rank3: require("../../assets/invite/yqhy_dsm.png"),
      invite: { rank: [] },
      user: {
        isLogin: true,
      },
      refreshing: false,
      disabled: false,
    };
  },
  computed: {
    ...mapGetters(["uid"]),
  },
  mounted() {
    this.init();
    this.utils.getQimo(this.uid);

    window.addEventListener("scroll", this.handleScroll, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    handleScroll() {
      this.disabled = this.utils.handleScroll();
    },
    onRefresh() {
      setTimeout(() => {
        this.refreshing = false;
        this.init();
      }, 1000);
    },
    init: function () {
      this.user.isLogin = this.$store.state.uid ? true : false;
      this.fnGetInviteData();
    },
    fnGetInviteData: function () {
      if (this.$store.state.uid) {
        Invite.fnGetInviteData({
          uid: this.$store.state.uid ? this.$store.state.uid : "",
        }).then((data) => {
          if (data && data.status) {
            this.invite = data;
          }
        });
      }
    },
    // 预览图片
    fnPreview: function (path) {
      this.utils.fnPreviewPic([path]);
    },
    fnOpenLogin: function () {
      this.utils.fnOpenCommon(this, {
        name: "login",
        query: { from: "invite", active: 0 },
      });
    },
    fnOpenRegister: function () {
      this.utils.fnOpenCommon(this, {
        name: "login",
        query: { from: "invite", active: 1 },
      });
    },
    fnOpenRecord: function () {
      this.utils.fnOpenCommon(this, { name: "invite_record" });
    },
    fnOpenReward: function () {
      this.utils.fnOpenCommon(this, { name: "invite_reward" });
    },
    // 复制
    fnCopyText: function (el) {
      let vm = this;
      let clipboard = new this.clipboard(el);
      clipboard.on("success", function () {
        vm.utils.fnMsg("复制成功");
      });
      clipboard.on("error", function () {
        vm.utils.fnMsg("复制失败");
      });
    },
    // 回到顶部
    fnScorllTop: function () {
      document.documentElement.scrollTop = document.body.scrollTop = 0;
    },
  },
};
</script>
